<template>
  <div>
    <div>
      <el-form :inline="true" >
        <el-form-item >
          <el-input
            placeholder="请输入规则名称"
            v-model="queryObj.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="getMainListReset" ><i class="iconfont icon-search"></i>查询</el-button>
          <el-button type="primary" size="medium" @click="goto('')"><i class="iconfont icon-plus"></i>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        stripe
      >
        <el-table-column
          label="ID"
          prop="penalty_id"
          width="50">
        </el-table-column>
        <el-table-column
          label="规则名称"
          prop="penalty_name"
        >
        </el-table-column>
        <el-table-column
          label="出行前（天）"
        >
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.penalty_detail" :key="index">{{item.start_day+'-'+item.end_day}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="违约金（占订单总费用%）"
        >
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.penalty_detail" :key="index">{{item.proportion}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination> -->
    </div>

    <!-- // 添加编辑 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="规则名称"  prop="penalty_name">
          <el-input placeholder="请输入" v-model="form.penalty_name" ></el-input>
        </el-form-item>
      </el-form>
      <el-table
        class="small-table mb16"
        :data="form.penalty_detail"
        border
        style="width: 100%"
      >
        <el-table-column label="出行前（天）">
          <template slot-scope="scope">
            <span>{{scope.row.start_day}}</span>-<span>{{scope.row.end_day}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="proportion" label="违约金（占订单总费用%）"> </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="openDlg(scope.row, scope.$index)"
              ><i class="iconfont icon-edit"></i>编辑</el-button
            >
            <el-button type="text" @click="delSub(scope.$index)"
              ><i class="iconfont icon-del"></i>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary"  size="medium" @click="openDlg('')"
          ><i class="iconfont icon-plus"></i>添加</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>

    <!-- // 添加编辑 -->
    <el-dialog :title="dialogObj.title" :visible.sync="dialogFormVisible2">
      <el-form
        ref="addform"
        :model="addform"
        :rules="addrules"
        label-width="200px"
      >
        <el-form-item label="出行前（天）" prop="hasDay">
          <div class="flex">
            <div><el-input class="smi" placeholder="请输入" v-model="addform.start_day"></el-input>&nbsp;天</div>
            <div style="margin: 0 10px;">----</div>
            <div><el-input class="smi" placeholder="请输入" v-model="addform.end_day"></el-input>&nbsp;天</div>
          </div>
        </el-form-item>
        <el-form-item label="违约金（占订单总费用%）" prop="proportion">
          <el-input class="w300" placeholder="请输入" v-model="addform.proportion"></el-input>&nbsp;%
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addOneRule">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {  getPenaltyList,
  modifyOrAddPenalty,
  deletePenalty } from 'api/lineManagement/lineGlobalSettingAPI'
// import config from 'api/config'
// import { pageSizeArr } from 'common/config/constConfig'
import { deepClone } from 'common/js/util'

export default {
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加规则'
      }else{
        return '编辑规则'
      }
    },
    dialogObj() {
      let obj;
      if(this.dlgisEdit) {
        obj = {
          title: '编辑'
        }
      }else{
        obj = {
          title: '添加'
        }
      }
      return obj;
    },
    hasDay() {
      if(this.addform.start_day && this.addform.end_day) {
        return true
      }else{
        return null
      }
    }
  },
  watch: {
    hasDay(val) {
      this.addform.hasDay = val
    }
  },
  data() {
    return {
      dialogMode: 'add',
      dialogFormVisible: false,
      dlgisEdit: false,
      dialogFormVisible2: false,
      addform: {},
      form: {},
      // pageSizeArr,
      queryObj: {},
      rules: {
        penalty_name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      addrules: {
        hasDay: [
          { required: true, message: '请输入完整天数', trigger: 'blur' }
        ],
        proportion: [
          { required: true, message: '请输入违约金', trigger: 'blur' }
        ]
      },
      // imgUrl: config.imgUrl,
      mainList: [],
      // page: {
      //   total: 0,
      //   page: 1,
      //   limit: 10
      // },
      
    }
  },
  methods: {
    goto(row) {
      this.form = {
        penalty_detail: []
      }
      this.dialogMode = 'add'
      this.dialogFormVisible = true
      if(row) {
        // 深克隆下
        this.form = deepClone(row)
        this.dialogMode = 'edit'
      }
    },
    openDlg(row, index) {
      this.addform = {};
      this.dialogFormVisible2 = true;
      this.dlgisEdit = false;
      if (row) {
        this.editIndex = index;
        this.dlgisEdit = true;
        this.addform = {...row}
      }
    },
    delSub(index) {
      this.form['penalty_detail'].splice(index, 1)
    },
    async addOneRule() {
      await this.$refs.addform.validate()
      let obj = {...this.addform}
      if (this.dlgisEdit) {
        let oldObj = this.form['penalty_detail'];
        oldObj[this.editIndex] = obj;
        this.form['penalty_detail'] = [...oldObj];
      } else {
        this.form['penalty_detail'].push(obj);
      }
      this.dialogFormVisible2 = false;
    },
    async doAction() {
      await this.$refs.form.validate()
      if(this.form.penalty_detail.length == 0){
        this.$message.error('请添加规则')
        return
      }
      let data = {...this.form}
      modifyOrAddPenalty(data).then(() => {
        this._caozuoAfter('操作成功')
      })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row)
      })
    },
    _del(row){
      deletePenalty(row.penalty_id).then(res => {
        this._caozuoAfter(res.rMsg)
      })
    },
    _caozuoAfter(msg){
      this.dialogFormVisible = false
      this.$message({
        message: msg,
        type: 'success'
      })
      this._mainList()
    },
    getMainListReset(){
      this.page.page = 1
      this._mainList()
    },
    // 获取
    _mainList(){
      let data = {...this.queryObj}
      // data.pageInfo = {...this.page}
      getPenaltyList(data).then(res => {
        // let pageInfo = res.pageInfo
        // this.page.total = pageInfo.Total
        // this.page.page = pageInfo.page
        this.mainList = res.rData
      })
    },
  },
  created(){
    this._mainList()
  }
}
</script>

<style lang="scss" scoped>
.smi{
  width: 100px;
}
.w300{
  width: 300px;
}
</style>
